<html>
  <head>
    <title>抽签 Draw</title>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,maximum-scale=5.0, "
    />
    <link href="./assets/css/button.css" rel="stylesheet" />
    <link href="./assets/css/mdui.min.css" rel="stylesheet" />

    <style>
      .footer {
        z-index: 9999;
        position: fixed;
        bottom: 0em;
        width: 100%;
        background-color: rgba(255, 255, 255);
        box-shadow: 0px -2px 16px 3px rgba(0, 0, 0, 0.1);
      }
      .card {
        box-shadow: 2px 3px 16px 3px rgba(0, 0, 0, 0.1);
        padding: 1em 1em 1em 1em;
        margin-bottom: 2em;
        margin-right: 2em;
        display: inline-block;
      }
    </style>
  </head>
  <body style="margin: 0 auto; padding-bottom: 10em">
    <div
      id="name-list"
      style="
        text-align: center;
        padding-top: 1em;
        padding-left: 2em;
        padding-right: 2em;
        align-items: center;
      "
    >
      <div id="list"></div>
    </div>
    <div id="toolbar" class="footer">
      <div
        style="
          padding-left: 2em;
          text-align: center;
          padding-bottom: 1em;
          padding-top: 1em;
        "
      >
        <button
          onclick="pointer = 0;list=FYShuffle(list)"
          class="button button-border button-rounded button-primary button-large"
          style="font-size: 1.25em; font-weight: bolder"
        >
          刷新
        </button>

        <button
          onclick="random()"
          class="button button-border button-rounded button-primary button-large"
          style="font-size: 1.25em; font-weight: bolder"
        >
          抽签
        </button>
        <br />
        <div style="padding-top: 1em">
          <button
            class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple"
            onclick="document.getElementById('num').value = Math.floor(document.getElementById('num').value)-1"
          >
            <i class="mdui-icon material-icons">navigate_before</i>
          </button>

          <input
            type="text"
            id="num"
            name="num"
            minlength="1"
            maxlength="2"
            value="1"
            style="
              width: 2em;
              height: 50px;
              font-size: 1.25em;
              text-align: center;
            "
          /><button
            class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple"
            onclick="document.getElementById('num').value = Math.floor(document.getElementById('num').value)+1"
          >
            <i class="mdui-icon material-icons">navigate_next</i>
          </button>
        </div>
      </div>
    </div>

    <script src="./assets/js/mdui.min.js"></script>
    <script src="./assets/js/jdenticon.min.js"></script>
    <script>
      function FYShuffle(arr) {
        let len = arr.length;

        while (len > 1) {
          let rand = Math.floor(Math.random() * len);
          len--;
          let temp = arr[len];
          arr[len] = arr[rand];
          arr[rand] = temp;
        }
        isRefresh = false;
        return arr;
      }
      var isRefresh = true;
      var list = [
        "邓心怡",
        "黄思诗",
        "黄驿茗",
        "蒋延真",
        "赖思萌",
        "兰金洁 ",
        "李睿君",
        "林诗宏 ",
        "林雨格",
        "龙腾宇",
        "农秀源",
        "潘利丽",
        "潘艺菲",
        "彭馨瑶",
        "覃彬语",
        "覃兰芬",
        "唐若蓝",
        "田诗琳",
        "魏书然",
        "吴依凡",
        "殷林雅馨",
        "周昱君",
        "黄婧羽",
        "陈建廷",
        "陈睿祺",
        "陈彧",
        "程坚钲",
        "何官洪",
        "胡耀之",
        "胡志杰",
        "黄民轩",
        "黄宗涛",
        "蒋陈宇",
        "蒋韦尔",
        "赖前安",
        "蓝子程",
        "李景航",
        "李明坤",
        "李云天",
        "林宸颉",
        "董航聿",
        "刘智宇",
        "罗予哲",
        "毛宏天",
        "蒙唐旭",
        "潘泓年",
        "沈黄乐航",
        "石点墨",
        "苏凯文",
        "覃光睿",
        "谭家斌",
        "王骞飞",
        "韦乐衡",
        "徐崇皓",
        "章舜",
        "陈佳祺",
        "谭子琪",
        "胡跃仪",
      ];

      function getRandomnInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
      }
      list = FYShuffle(list);
      var pointer = 0;

      function random() {
        if (isRefresh) {
          list = FYShuffle(list);
          pointer = 0;
        }

        num = Math.floor(document.getElementById("num").value);
        if (num > list.length) {
          num = list.length;
          document.getElementById("num").value = num;
        } else {
        }
        str = "";

        for (i = 0; i < num; i++) {
          if (pointer == list.length - 1) {
            str =
              str +
              `<div id="name" class="card">
                        <canvas width="150" height="150" data-jdenticon-value="` +
              list[pointer] +
              `"></canvas>
                    <h2 style="font-size: 3.25em">` +
              list[pointer] +
              `</h2>
                </div>`;
            pointer = 0;
            isRefresh = true;
          } else {
            str =
              str +
              `<div id="name" class="card">
                <div>
                        <canvas  width="150" height="150" data-jdenticon-value="` +
              list[pointer] +
              `"></canvas></div>
                    <h2 style="font-size: 3.25em">` +
              list[pointer] +
              `</h2>
                </div>`;
            pointer++;
          }
        }
        document.getElementById("list").innerHTML = str;
        jdenticon();
      }
    </script>
  </body>
</html>
